// 用户分类模块入口
<template>
	<div
		class="app-container"
		v-loading="listLoading"
	>
		<div class="header">
			<div class="header-item">
				<el-button
					@click="addSort()"
					type="success"
					size="small"
				>
					<i class="el-icon-plus"></i>
					新建分类
				</el-button>
			</div>
			<div class="header-item">
				分类名称:
				<el-input
					placeholder=""
					v-model="userName"
					style="width: 200px; margin-right: 20px"
				>
				</el-input>
				<el-button
					@click="search()"
					type="primary"
					size="small"
				>
					<i class="el-icon-search"></i>
					查询
				</el-button>
				<el-button
					@click="search()"
					type="primary"
					size="small"
				><i class="el-icon-refresh-left"></i>

					刷新
				</el-button>
			</div>

		</div>
		<!-- 数据展示 -->
		<el-table
			:data="list"
			element-loading-text="Loading"
			border
			fit
			highlight-current-row
		>
			<el-table-column
				align="center"
				label="用户分类ID"
				width="100"
			>
				<template slot-scope="scope">
					{{ scope.row.sort_id }}
				</template>
			</el-table-column>
			<el-table-column
				label="用户分类名称"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.sort_name }}
				</template>
			</el-table-column>
			<el-table-column
				label="描述"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.desc }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="created_at"
				label="操作"
			>
				<template slot-scope="scope">
					<el-button
						@click.native.prevent="editSort(scope)"
						type="primary"
						size="small"
					>
					<i class="el-icon-edit"></i>
						编辑
					</el-button>
					<el-button
						@click.native.prevent="deleteSort(scope)"
						type="danger"
						size="small"
					>
					<i class="el-icon-delete"></i>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			class="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[100, 200, 300, 400]"
			:page-size="currentPageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="paginationTotal"
		>
		</el-pagination>
		<!-- 添加分类 -->
		<el-dialog
			title="添加分类"
			:visible.sync="addSortData.dialogVisible"
			width="30%"
		>
			<el-form
				ref="form"
				:model="addSortData"
				label-width="80px"
			>
				<el-form-item label="分类名称">
					<el-input
						v-model="addSortData.name"
					></el-input>
				</el-form-item>
				<el-form-item label="分类描述">
					<el-input
						v-model="addSortData.desc"
					></el-input>
				</el-form-item>
			</el-form>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					@click="addSortData.dialogVisible = false"
				>
					取 消
				</el-button>
				<el-button
					type="primary"
					@click="confirmAdd"
				>
					确 定
				</el-button>
			</span>
		</el-dialog>
		<!-- 编辑分类 -->
		<el-dialog
			title="添加分类"
			:visible.sync="editSortData.dialogVisible"
			width="30%"
		>
			<el-form
				ref="form"
				:model="editSortData"
				label-width="80px"
			>
				<el-form-item label="分类ID">
					<el-input
						v-model="editSortData.id"
						disabled
					></el-input>
				</el-form-item>
				<el-form-item label="分类名称">
					<el-input
						v-model="editSortData.name"
					></el-input>
				</el-form-item>
				<el-form-item label="分类描述">
					<el-input
						v-model="editSortData.desc"
					></el-input>
				</el-form-item>
			</el-form>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					@click="editSortData.dialogVisible = false"
				>
					取 消
				</el-button>
				<el-button
					type="primary"
					@click="confirmEdit"
				>
					确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	getUserSort,
	addUserSort,
	deleteUserSort,
	editUserSort,
} from "@/api/user";

export default {
	data() {
		return {
			list: null,
			listLoading: true,
			// 用户分类
			userSort: "",
			// 用户名称
			userName: "",
			// 当前页
			currentPage: 1,
			// 当前页大小
			currentPageSize: 10,
			// 当前数据总数
			paginationTotal: 0,
			addSortData: {},
			editSortData: {},
		};
	},
	created() {
		// 进入界面默认查询一次
		this.search();
	},
	methods: {
		/**
		 * @desc 查询数据
		 */
		search() {
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在加载数据中，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			let param = {
				size: this.currentPageSize,
				page: this.currentPage,
				user_sort: this.userSort,
				user_name: this.userName,
			};
			getUserSort(param)
				.then((response) => {
					this.list = response.data.sort_list;
					this.paginationTotal = response.data.total;
					this.listLoading = false;
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				})
				.catch((err) => {
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				});
		},
		/**
		 * @desc 添加用户分类
		 */
		addSort() {
			this.addSortData.dialogVisible = true;
		},
		/**
		 * @desc 监听分页器大小改变
		 */
		/**
		 * @desc confirmAdd
		 */
		confirmAdd() {
			let data = {
				name: this.addSortData.name,
				desc: this.addSortData.desc,
			};
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在添加，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			addUserSort(data)
				.then((suc) => {
					this.$message({
						message: "添加分类成功",
						type: "success",
					});
					// 关闭loading
					setTimeout(() => {
						loading.close();
						addSortData.dialogVisible = false;
					}, 500);
				})
				.catch((err) => {
					this.$message({
						message: "添加分类失败",
						type: "error",
					});
					// 关闭loading
					setTimeout(() => {
						loading.close();
						addSortData.dialogVisible = false;
					}, 500);
				});
		},
		/**
		 * @desc 删除分类
		 */
		deleteSort(data) {
			let param = {
				id: data.row.sort_id,
			};
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在删除，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			deleteUserSort(param)
				.then((suc) => {
					this.$message({
						message: "删除分类成功",
						type: "success",
					});
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				})
				.catch((err) => {
					this.$message({
						message: "删除分类失败",
						type: "error",
					});
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				});
		},
		/**
		 * @desc editSort
		 */
		editSort(data) {
			this.editSortData.id = data.row.sort_id;
			this.editSortData.name = data.row.sort_name;
			this.editSortData.desc = data.row.desc;
			this.editSortData.dialogVisible = true;
		},
		/**
		 * @desc confirmEdit
		 */
		confirmEdit() {
			let data = {
				id: this.editSortData.id,
				name: this.editSortData.name,
				desc: this.editSortData.desc,
			};
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "数据加载中，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			editUserSort(data)
				.then((suc) => {
					this.$message({
						message: "编辑分类成功",
						type: "success",
					});
					// 关闭loading
					setTimeout(() => {
						loading.close();
						editSortData.dialogVisible = false;
					}, 500);
				})
				.catch((err) => {
					this.$message({
						message: "编辑分类失败",
						type: "error",
					});
					// 关闭loading
					setTimeout(() => {
						loading.close();
						editSortData.dialogVisible = false;
					}, 500);
				});
		},
		handleSizeChange(size) {
			this.currentPageSize = size;
			search();
		},
		/**
		 * @desc 监听当前页大小改变
		 */
		handleCurrentChange(page) {
			this.currentPage = page;
			search();
		},
	},
};
</script>
<style>
.header {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
}

.header .header-item {
	margin-right: 20px;
}

.pagination {
	margin-top: 20px;
	float: right;
}
</style>
